// out: ../css/taskcompleted.css

@import url(common.less);

html{
  background-color: @bg_color;
  z-index: 99999;
}
body {
  background-color: @bg_color; 
 
}
input{
  border: 0;
  outline: none;
}
// 已完成头部
.tophead{
    position: sticky;
    top: 0;
    z-index: 999;
  .head {
    width: 100%;
    height: 50./@rem;
    background-color: @white;
  
    ul {
      display: flex;
  
      li {
        height: 22./@rem;
        font-size: 16./@rem;
        font-weight: 600;
        margin-right: 36./@rem;
        margin-top: 8./@rem;
        color: @text_gray;
  
        &:nth-child(1) {
          margin-left: 30.5./@rem;
        }
  
        &:nth-child(3) {
          color: @text_main;
        }
      }
    }
  
    .line {
      width: 23./@rem;
      height: 4./@rem;
      position: absolute;
      top: 36./@rem;
      left: 194.5./@rem;
      background-image: linear-gradient(210deg, #F25C4D 25%, #E52D21 100%, #E52D21 100%);
      border-radius: 2./@rem;
    }
  }
}
  
 
  // 搜索框
  .search {
    width: 100%;
    height: 40./@rem;
    background-color: @white;
  
    .searchbox {
      width: 345./@rem;
      height: 32./@rem;
      background-color: #F4F4F4;
      border-radius: 16./@rem;
      margin: 0 auto;
      display: flex;
      align-items: center;
  
      img {
        width: 15./@rem;
        height: 16./@rem;
        margin-right: 4./@rem;
        margin-left: 10./@rem;
      }
  
      input {
        background-color: #F4F4F4;
        height: 17px;
        font-weight: 400;
        font-size: 12px;
        color: #818181;
      }
    }
  }
  
  // 时间筛选
  .timebox {
    width: 100%;
    height: 60./@rem;
    background: @white;
    padding: 14./@rem 15./@rem;
    display: flex;
    align-items: center;
    line-height: 60./@rem;
  
    .timestart {
      width: 106./@rem;
      height: 32./@rem;
      font-size: 14px;
      font-weight: 400;
      background-color: @bg_color;
      border-radius: 16px;
      text-align: center;
      line-height: 32./@rem;
      margin-right: 11./@rem;
      color: @text_gray;
    }
  
    span {
      color: @text_main;
      font-size: 14px;
      font-weight: 400;
      margin-right: 15.5./@rem;
    }
  
    .timeend {
      width: 106./@rem;
      height: 32./@rem;
      font-size: 14px;
      font-weight: 400;
      background-color: @bg_color;
      border-radius: 16px;
      text-align: center;
      line-height: 32./@rem;
      margin-right: 27.5./@rem;
      color: @text_gray;
    }
  
    .select {
      width: 60./@rem;
      height: 32./@rem;
      background-color: #FADCD9;
      border-radius: 16./@rem;
      font-weight: 400;
      font-size: 14./@rem;
      color: @white;
      text-align: center;
      line-height: 32./@rem;
      outline: none;
      border: 0;
    }
  }
  // 隐藏的图片和文字
  .hidebox{
    position: absolute;
    top: 337.39./@rem;
    left: 87.5./@rem;
    opacity: 0;
    .pic{
      margin-bottom: 20./@rem;
      img{
        width: 200./@rem;
        height: 120./@rem;
      }
    }
    .notfined{
      width: 171./@rem;
      height: 22./@rem;
      font-weight: 400;
      font-size: 16./@rem;
      color: #818181;
      text-align: center;
      margin-left: 15./@rem;
    }

  }

// 任务编号
.tasknum0 {
  width: 345./@rem;
  height: 216./@rem;
  background-color: @white;
  margin: 20./@rem 15./@rem 15./@rem;
  position: relative;

  .top {
    height: 22./@rem;
    font-weight: 500;
    font-size: 16./@rem;
    color:@text_main;
    position: absolute;
    top: 15./@rem;
    left: 20./@rem;
  }
  .radius1{
    width: 22./@rem;
    height: 22./@rem;
    text-align: center;
    line-height: 22./@rem;
    background-color:@text_main;
    border-radius: 11./@rem;
    font-weight: 500;
    font-size: 12./@rem;
    color: @white;
    position: absolute;
    top: 59./@rem;
    left: 19.5./@rem;
  }
  .radius2{
    width: 22./@rem;
    height: 22./@rem;
    text-align: center;
    line-height: 22./@rem;
    background-color:@brand_color;
    border-radius: 11./@rem;
    font-weight: 500;
    font-size: 12./@rem;
    color: @white;
    position: absolute;
    top: 111.5./@rem;
    left: 19.5./@rem;
  }
  .verticalline{
    width: 1./@rem;
    height: 22./@rem;
    border: 1./@rem dashed @form_border;
    position: absolute;
    top: 85./@rem;
    left: 30.5./@rem;
  }
  .article1{
    width: 275./@rem;
    height: 40./@rem;
    font-weight: 400;
    font-size: 14./@rem;
    color:@text_gray;
    position: absolute;
    top: 58./@rem;
    left: 53./@rem;
  }
  .article2{
    width: 272./@rem;
    height: 20./@rem;
    font-weight: 400;
    font-size: 14./@rem;
    color:@text_gray;
    position: absolute;
    top: 112.5./@rem;
    left: 53./@rem;
  }
  .line{
    width: 309./@rem;
    height: 1./@rem;
    border: 1./@rem solid @separated;
    top:155./@rem ; 
    position: absolute;
    left: 19./@rem;
    color:@text_gray;
  }
  .gettime{
    height: 20./@rem;
    color: #818181;
    font-size: 14px;
    font-weight: 400;
    line-height: 20./@rem;
    letter-spacing: 0.16px;
    text-align: left;
    position: absolute;
    top: 172.5./@rem;
    left: 19.5./@rem;
    .time{
     color: #2a2929;
     margin-left: 5./@rem;
    }

  }
}
.tasknum1 {
  width: 345./@rem;
  height: 216./@rem;
  background-color: @white;
  margin: 15./@rem 15./@rem 15./@rem;
  position: relative;

  .top {
    height: 22./@rem;
    font-weight: 500;
    font-size: 16./@rem;
    color:@text_main;
    position: absolute;
    top: 15./@rem;
    left: 20./@rem;
  }
  .radius1{
    width: 22./@rem;
    height: 22./@rem;
    text-align: center;
    line-height: 22./@rem;
    background-color:@text_main;
    border-radius: 11./@rem;
    font-weight: 500;
    font-size: 12./@rem;
    color: @white;
    position: absolute;
    top: 59./@rem;
    left: 19.5./@rem;
  }
  .radius2{
    width: 22./@rem;
    height: 22./@rem;
    text-align: center;
    line-height: 22./@rem;
    background-color:@brand_color;
    border-radius: 11./@rem;
    font-weight: 500;
    font-size: 12./@rem;
    color: @white;
    position: absolute;
    top: 111.5./@rem;
    left: 19.5./@rem;
  }
  .verticalline{
    width: 1./@rem;
    height: 22./@rem;
    border: 1./@rem dashed @form_border;
    position: absolute;
    top: 85./@rem;
    left: 30.5./@rem;

  }
  .article1{
    width: 275./@rem;
    height: 40./@rem;
    font-weight: 400;
    font-size: 14./@rem;
    color:@text_gray;
    position: absolute;
    top: 58./@rem;
    left: 53./@rem;
  }
  .article2{
    width: 272./@rem;
    height: 20./@rem;
    font-weight: 400;
    font-size: 14./@rem;
    color:@text_gray;
    position: absolute;
    top: 112.5./@rem;
    left: 53./@rem;
  }
  .line{
    width: 309./@rem;
    height: 1./@rem;
    border: 1./@rem solid @separated;
    top:155./@rem ; 
    position: absolute;
    left: 19./@rem;
    color:@text_gray;
  }
  .gettime{
    height: 20./@rem;
    color: #818181;
    font-size: 14px;
    font-weight: 400;
    line-height: 20./@rem;
    letter-spacing: 0.16px;
    text-align: left;
    position: absolute;
    top: 172.5./@rem;
    left: 19.5./@rem;
    .time{
     color: #2a2929;
     margin-left: 5./@rem;
    }

  }
}
.tasknum2 {
  width: 345./@rem;
  height: 216./@rem;
  background-color: @white;
  margin: 15./@rem 15./@rem 15./@rem;
  position: relative;

  .top {
    height: 22./@rem;
    font-weight: 500;
    font-size: 16./@rem;
    color:@text_main;
    position: absolute;
    top: 15./@rem;
    left: 20./@rem;
  }
  .radius1{
    width: 22./@rem;
    height: 22./@rem;
    text-align: center;
    line-height: 22./@rem;
    background-color:@text_main;
    border-radius: 11./@rem;
    font-weight: 500;
    font-size: 12./@rem;
    color: @white;
    position: absolute;
    top: 59./@rem;
    left: 19.5./@rem;
  }
  .radius2{
    width: 22./@rem;
    height: 22./@rem;
    text-align: center;
    line-height: 22./@rem;
    background-color:@brand_color;
    border-radius: 11./@rem;
    font-weight: 500;
    font-size: 12./@rem;
    color: @white;
    position: absolute;
    top: 111.5./@rem;
    left: 19.5./@rem;
  }
  .verticalline{
    width: 1./@rem;
    height: 22./@rem;
    border: 1./@rem dashed @form_border;
    position: absolute;
    top: 85./@rem;
    left: 30.5./@rem;
  }
  .article1{
    width: 275./@rem;
    height: 40./@rem;
    font-weight: 400;
    font-size: 14./@rem;
    color:@text_gray;
    position: absolute;
    top: 58./@rem;
    left: 53./@rem;
  }
  .article2{
    width: 272./@rem;
    height: 20./@rem;
    font-weight: 400;
    font-size: 14./@rem;
    color:@text_gray;
    position: absolute;
    top: 112.5./@rem;
    left: 53./@rem;
  }
  .line{
    width: 309./@rem;
    height: 1./@rem;
    border: 1./@rem solid @separated;
    top:155./@rem ; 
    position: absolute;
    left: 19./@rem;
    color:@text_gray;
  }
  .gettime{
    height: 20./@rem;
    color: #818181;
    font-size: 14px;
    font-weight: 400;
    line-height: 20./@rem;
    letter-spacing: 0.16px;
    text-align: left;
    position: absolute;
    top: 172.5./@rem;
    left: 19.5./@rem;
    .time{
     color: #2a2929;
     margin-left: 5./@rem;
    }

  }
}
  .allshow{
    width: 134./@rem;
    height: 20./@rem;
    font-weight: 400;
    font-size: 14./@rem;
    color:@text_gray;
    text-align: center;
    margin: 16.5./@rem auto 42./@rem;
  }
  .common_button {
    // position: sticky;
    // bottom: 0;
    padding-top: 5.9./@rem;
    .task .red{
    color:#EF4F3F ;
  }}